<template>
  <div class="space-y-4">
    <div class="flex items-center justify-between p-4 bg-background-800 rounded-xl border border-background-700">
      <div>
        <h3 class="text-text-primary font-medium">性能分析面板</h3>
        <p class="text-text-secondary text-sm mt-1">显示全局性能监控面板，实时查看应用性能指标</p>
      </div>
      <label class="relative inline-flex items-center cursor-pointer">
        <input 
          type="checkbox" 
          v-model="showPerformanceMonitor" 
          @change="togglePerformanceMonitor"
          class="sr-only peer"
        />
        <div class="w-11 h-6 bg-background-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-500/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUiStore } from '../../store/useUiStore'

const uiStore = useUiStore()
const showPerformanceMonitor = ref(false)

const togglePerformanceMonitor = () => {
  uiStore.setPerformanceMonitorVisible(showPerformanceMonitor.value)
}

onMounted(() => {
  // 初始化时从store获取当前状态
  showPerformanceMonitor.value = uiStore.isPerformanceMonitorVisible
})
</script>
